Generador de imágenes para favicon

favigen es de lo mejorcito que he visto hasta ahora para generar un favicon, bastará con subir nuestra imagen y nos la proporcionará a escoger en tamaño 16px, 32px, 64px y en formato ico.

¡¡5 años!! En ocasiones decimos que volveríamos a vivir tiempos pasados quitando algunas experiencias, en este caso del blog yo volvería a vivir esos cinco años sin quitar ni un sólo día de ellos. Así que seguimos como estos años que han transcurrido, aprendiendo, jugando, y pasándolo bien que es de lo que se trata. Espero que esos cinco se multipliquen y poder disfrutarlos con todos. ¡¡Gracias!!

DESCARGA

REFERENCIA Y DESCARGA:creativeNERDS

0to255 es una herramienta online que tengo añadida desde hace unos días a mis favoritos, nos ofrece una paleta de colores con la posibilidad de obtener diferentes matices de un mismo color.

Da igual si eres diseñador o no, es un sitio imprescindible para todos los que en algún momento personalizamos el blog.

Formato ICO y PNG

Referencia y descarga:
deviantART

Si tenemos una imagen de fondo en el blog podemos añadirle un efecto que le aporte calidez con una segunda imagen de fondo.

Imagen única en body

Resultado con pattern

La segunda imagen que añadiremos será de tipo pattern este tipo de imágenes se usan en la repetición de elementos gráficos. El formato aconsejado es png (fondo transparente) porque esa transparencia será la que permitirá visualizar la imagen de body.
Para el tamaño escogeremos 2x2. El resultado sería algo así.

Si visualizamos el blog a gran tamaño será más perceptible la imagen que añadimos de fondo transparente.

Los estilos de body los dejaremos como están con la imagen de fondo que ya teníamos añadida, si no la tenemos podemos ver la forma de añadirla en las siguientes entradas. 1 - 2

Justo antes de ]]></b:skin> añadiremos los estilos para la imagen que hemos creado.

.background2 {

width:100%;

height:100%;

position:fixed;

top:0px;

left:0px;

background:transparent url(Url-pattern-png) repeat top left;

}

Luego buscamos <div id='content-wrapper'> y justo después añadimos:

<div class="background2"></div>

MyTopBanner es una aplicación que nos permite añadir un banner muy original a nuestro perfil de Facebook.

Podemos escoger entre las distintas categorías que ofrece la aplicación o bien cualquier imagen desde nuestro PC.

Una vez escogida la imagen o el banner la aplicación la divide en cinco imágenes obteniendo un aspecto similar a mosaico. Con el vista previa nos ayudaremos a posicionar la imagen para que sea cortada en el lugar exacto.

La misma aplicación nos añade nuestro banner y al mismo tiempo guarda las imágenes en un álbum de nuestro Facebook, para eliminar el banner bastará con eliminar el álbum que contiene las imágenes.

Si hay alguien que entiende de Twitter y entiende bien ese es @TwittBoy y hace un par de días nos sorprendió con una aplicación que se llama Símbolos para Twitter  como bien describe en su blog son "Pequeños dibujos para decorar grandes Tweets"

La aplicación proporciona más de 400 items entre iconos, símbolos y tipografías en caracteres Unicode y dibujos ASCII que podemos usar directamente en nuestra cuenta de Twitter.

Es muy sencillo de usar accedemos a Símbolos para Twitter con nuestra cuenta de Twitter, escribimos nuestro Tweet y marcamos sobre los símbolos que deseamos añadir, pulsamos ENVIAR y automáticamente nuestro Tweet lo veremos publicado.

Para hacerlo más sencillo y acceder de forma rápida podemos instalar un marcador que desplegará una ventana desde donde podemos Twittear.

Símbolos para Twitter dispone además un FAQ que nos ayudará a resolver nuestras dudas y un formulario de contacto donde sugerir nuevos iconos y caracteres.

No se pierdan el clásico "Asunto" del formulario sustituido por un simpático "Usted dirá"

También existe una versión en Ingles y como no, cuenta en Twitter: @SimbolosTwiter

Felicitaciones @TwittBoy  gracias por compartirlo.

Hace unos meses presentaba un proyecto llamado Hosting para Blogs la acogida fue excelente y la propuesta para afiliados no se hizo de esperar.

Tampoco se hizo de esperar la llegada de nuestros primeros clientes, en estos meses realizamos diseños personalizados para distintos blogs personales y de empresa, solucionamos problemas en un centenar de plantillas y fueron muchos los que se beneficiaron de las ventajas de alojamiento propio para sus blogs en Wordpress disfrutando con ello de un hosting sin limitaciones.

Pero no termina aquí la cosa porque hemos seguido trabajando para proporcionar más servicios a los amigos y clientes de Hosting para Blogs. 

Por si todo lo anterior fuera poco hay novedades que convierten Hosting para Blogs en uno de los sitios más completos de la red,  no estoy exagerando y se darán cuenta cuando les diga que las novedades son las siguientes:

Nuevo espacio de templates para Blogger, Wordpress y Tumblr para descargar de forma gratuita.
Algunos templates son de diseño propio otros, de autores a los que agradecemos su interés y colaboración para darlos a conocer. Es por eso, que hacemos público nuestro espacio de templates invitando a todos los que deseen compartir sus diseños, para ello pueden ponerse en contacto con nosotros por medio del formulario que encontraran en nuestra web.

Otra novedad son los planes especiales para alojamiento de páginas en Facebook hemos creado un completo tutorial para que puedas crear tu propia página utilizando nuestra aplicación,  si eres de los que no tienes tiempo o prefieres un diseño personalizado consulta precios y nosotros hacemos el trabajo por ti.

Y recuerda, que Facebook es la red social más importante del mundo con más de 500 millones de usuarios.

 Como se puede comprobar intentamos proporcionar todo lo que cualquier blogger puede necesitar como plantillas, alojamiento, tutoriales, diseño, dominios, asistencia, soluciones para blogs, posicionamiento, y cuanto necesites para que tu blog personal o de empresa sea de tu agrado.

Visita Hosting para Blogs y no dudes en contactar con nosotros para consultar precios y exponernos cualquier duda que responderemos en corto espacio de tiempo.

Cuando hablamos de añadir imágenes tipo bullet nos estamos refiriendo a  iconos pequeños de 16x16 aproximadamente y son muy útiles para resaltar los elementos de una lista. 

En freegraphicsworld encontraremos algunos que salen de lo corriente y podremos decir adiós al clásico punto añadido por la propiedad list-style.

Esto que vemos es un ejemplo de menú que podemos ver en la última entrada de Codrops el demo de la autora podemos verlo aquí un fantástico trabajo donde se combinan distintas fuentes de Google Font API

Para no complicarnos la vida lo que hice fue utilizar el menú superior omitiendo el resto de fuentes de la demo.

1 En plantilla edición de HTML y antes de ]]></b:skin> añadimos los estilos:

.sl_menu{
 margin:20px 0px 0px 20px; /* ubicamos arriba/derecha/abajo/izquierda */
 list-style:none;
}
.sl_menu li,
.sl_examples{
 float:left;
 font-family: 'Aclonica', serif; /* tipo de fuente, opcional de Google */
 font-size:30px; /* tamaño de fuente */
 line-height:50px;
 color:#333; /* color de barras separadoras */
 margin-right:5px;
 text-transform:uppercase;
}
.sl_menu a,
.sl_examples a{
 display:block;
 position:relative;
 float:left;
 clear:both;
 color:#fff;
}
.sl_menu a > span,
.sl_examples a > span{
 height:50px;
 float:left;
 position:relative;
 overflow:hidden;
}
.sl_menu a span span,
.sl_examples a span span{
 position:absolute;
 display:block;
 left:0px;
 top:0px;
 text-align:center;
}
.sl_menu a span span.sl-w1,
.sl_examples a span span.sl-w1{
 color:#333; /* color de fuente tal y como se muestra */
 text-shadow:0px 0px 1px #fff; /* sombra de texto tal y como se muestra */
 z-index:2;
}
.sl_menu a span span.sl-w2{
 color:#ff516f; /* color de fuente al pasar el cursor */
 text-shadow:0px 1px 2px #99162c; /* sombra de texto al pasar el cursor */
 z-index:3;
}
.sl_examples{
 padding-top:50px;
 margin:20px;
 clear:both;
 display:block;
}
.sl_examples a{
 margin:15px;
}

2 Nos situamos ahora justo después de ]]></b:skin> para añadir jQuery.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Si ya usamos jQuery en nuestro blog no es necesario añadirlo de nuevo y omitimos el paso 2.

3 A continuación pegamos el contenido de este archivo.

4 Por último guardamos los cambios y en plantilla de diseño editamos un nuevo gadget de HTML, en su interior añadimos:

<ul id="sl_menu" class="sl_menu">
<li><a href="#">Home</a>/</li>

<li><a href="#">Perfil</a>/</li>

<li><a href="#">Contact</a></li>

</ul>

La almohadilla será sustituida por la url que deseamos enlazar.
El texto de Home, Perfil y Contact lo sustituimos por el nuestro, será el texto que se visualiza y hace de enlace.

En los estilos está marcado el lugar donde podemos cambiar el color de los enlaces y la sombra de texto, así como el tamaño, la ubicación y el tipo de fuente.

No he tenido problemas con la plantilla no, eso que ven no es otra cosa que el resultado de probar como se veía el blog "patas arriba" como no podía ser de otro modo el sitio se llama Rotateme. 

¿Para que sirve? ni idea, no le veo funcionalidad, ¿Quizás satisfacer la curiosidad ?

Icon Archive es un aporte facilitado por i like its  me ha encantado por la variedad y aunque los ejemplos traten sobre una temática muy dulce los hay para todos los gustos y necesidades.

Se presentan en distintos tamaños y en formato PNG (fondo transparente) y algunos en formato ICO ideales para añadirlos como favicon al blog.

Y ahí van más, no he podido resistirme

My Secret

Lovely website

Fliraneo

REFERENCIA Y DESCARGA:ArtDesigner.lv

En la anterior entrada veíamos un generador de CSS3 que nos proporciona el código y sería algo así: Ver código

-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
-webkit-box-shadow: 1px 1px 7px #20B2AA;
-moz-box-shadow: 1px 1px 7px #20B2AA;
box-shadow: 1px 1px 7px #20B2AA;
text-shadow: 0px 0px 2px #000000;
background-image: -moz-linear-gradient(top, #20B2AA, #E0FFFF);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #20B2AA), color-stop(1.0, #E0FFFF));
background-color: #DDDDDD;
padding: 15px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11pt;
color: #FFFFFF;
text-align: left;

Para hacer uso de ese código tenemos que localizar el lugar que deseamos aplicar esas propiedades.

Para personalizar los post, buscamos en la plantilla:

.post {

aquí añadimos el código

margin:.5em 0 1.5em;

padding-bottom:1.5em;

}

Si lo que deseamos es personalizar los gadgets de la sidebar buscamos:

.sidebar .widget {

aquí añadimos el código

margin:0 0 1.5em;

padding:0 0 1.5em;

}

Bloque que acoge la sidebar:

#sidebar-wrapper {

aquí añadimos el código

width: 220px;

float: $endSide;

word-wrap: break-word;

overflow: hidden;

}

Header o cabecera:

#header-wrapper {

aquí añadimos el código

width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Bloque que acoge todas las entradas:

#main-wrapper {

aquí añadimos el código

width: 410px;

float: $startSide;

word-wrap: break-word;

overflow: hidden;

}

Footer:

#footer {

aquí añadimos el código

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Bloque que acoge todo el blog:

#outer-wrapper {

aquí añadimos el código

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Todos esos bloques tienen contenido y es probable que tengamos que ajustar el padding de forma que quede espacio suficiente de separación entre contenido y borde.

Tendremos en cuenta también que si lo que deseamos es añadir fondo y borde no es necesario hacer uso de las opciones para texto:

font-family: Verdana, Geneva, sans-serif;

font-size: 11pt;

color: #FFFFFF;

text-align: left;

Es innecesario añadirlas porque esas propiedades ya las tenemos en nuestra plantilla, igual que ocurre con padding.

Para añadir un gadget de HTML podemos añadir en la plantilla antes de ]]></b:skin> una clase  en este caso "gadget-html" en este caso si añadimos todo el código que nos proporciona el generador porque son estilos que no tenemos añadidos a la plantilla.

#gadget-html {

aquí todo el código del generador

}

Editamos un gadget de HTML y en su interior añadimos:

<div id="gadget-html">

Aquí añadimos el contenido.

</div>

CSS3 Playground es una herramienta online de código CSS3 compatible con cualquier navegador, con ella podemos obtener el código necesario con la facilidad de observar los cambios que vamos efectuando.

REFERENCIA:Cosas Sencillas

Descarga – Vtks Revolt

Descarga – Shit Happens

Descarga – Bleeding Cowboys